<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import img from '../../assets/login.jpg';
import { showToast } from 'vant';
import { Get_phone } from '../../api/index';
const router = useRouter()
const currentPage = '1';
const pageSize = '40';
const BrokerData = ref([]);
onMounted(async () => {
    const res = await Get_phone(currentPage, pageSize);
    const data = res.data.data.filter((t: any) => t.status !== '离职');
    console.log(data,'===================>');
    
    BrokerData.value = data
    console.log(BrokerData.value);

})
const from = ref();
const phone = ref('');
const code = ref('');
const randomNumber = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
const onSubmit = (values: any) => {
    const item = BrokerData.value.find((t: any) => t.mobile == phone.value)
    if (item) {
        if (Number(code.value) == randomNumber) {
            router.push({ path: "/" })
            showToast('登录成功');
            localStorage.setItem('token', JSON.stringify(200));
            localStorage.setItem('user', JSON.stringify(item))
            localStorage.setItem('date', JSON.stringify(Date.now()));
        } else {
            showToast('验证码错误');
        }
    } else {
        showToast('手机号未注册');
    }
};
// 状态
const text = ref('发送验证码');
const time = ref(60)
const send = ref()
const status = ref(false)
let phoneRegExp = /^1[3-9]\d{9}$/
const Send = () => {
    if (phoneRegExp.test(phone.value)) {
        let timer: any = null;
        text.value = `${time.value}后重新获取验证码`
        alert(randomNumber)
        console.log(send.value);
        status.value = true
        timer = setInterval(() => {
            status.value = true
            time.value--;
            text.value = `${time.value}后重新获取验证码`
            if (timer && time.value <= 1) {
                status.value = false
                text.value = '发送验证码'
                clearInterval(timer)
            }
        }, 1000)
    } else {
        showToast('手机号不可为空');
    }

}
</script>
<template>
    <div class="box">
        <header>宏烨经纪人</header>
        <main>
            <div class="tu">
                <img :src="img" alt="">
            </div>
            <van-form ref="from" @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号" :rules="[
                        { required: true, message: '请填写手机号' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }
                    ]" />
                    <div style="display: flex;">
                        <van-field v-model="code" name="code" label="验证码" placeholder="验证码"
                            :rules="[{ required: true, message: '请填写验证码' }]" />
                        <van-button :disabled="status" type="primary" @click="Send" ref="send" style="width: 140px;">{{ text
                        }}</van-button>
                    </div>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </main>
    </div>
</template>

<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    font-size: 16px;


    header {
        width: 100%;
        height: 50px;
        background: #1a88f7;
        color: #fff;
        line-height: 50px;
        padding: 0 5px;
        box-sizing: border-box;
    }

    main {
        width: 100%;
        height: calc(100% - 50px);
        overflow: hidden;

        .tu {
            width: 200px;
            margin: 20px auto;

            img {
                width: 100%;
            }
        }
    }
}
</style>